<script setup>
import { ref, reactive, watchEffect } from 'vue'
import { Search } from '@element-plus/icons-vue'
import SaleOrder from './saleOrder.vue'
import { GetDataBySaleNumberAndMaterialCodeAPI } from '@/api/order/sale/complaints.js'

const { proxy } = getCurrentInstance()
const props = defineProps({
  data: {
    type: Object,
    default: () => {}
  },
  disabled: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  }
})

// 封装 方法 字典查询
const {
  customer_complaints_order_type, // 订单状态
  solution_type //解决方案
} = proxy.useDict('customer_complaints_order_type', 'solution_type')

const emit = defineEmits(['reset', 'submit'])

const customerShow = ref(false)
const orderShow = ref(false)
const title = ref('新增')

const ruleFormRef = ref(null)

// 新增字段
const ruleForm = reactive({
  customerId: '', // 客户id
  customerName: '', // 客户
  materialId: '', // 物料id
  materialCode: '', // 物料编码
  batchNum: '', // 批次号
  orderType: '', // 订单类型
  salesDocumentNum: '', //销售发货单号
  complaints: '', //投诉问题
  enclosureUrl: '', // 附件
  solution: '', // 解决方案
  solutionRemark: '', // 解决方案备注
  solutionUrl: '' // 解决方案附件
})

if (props.data) {
  for (let key in props.data) {
    ruleForm[key] = props.data[key]
  }
  ruleForm.complaintsList = props.data.materialList
  // ruleForm.solution = Number(ruleForm.solution)
}

const rules = reactive({
  customerId: [{ required: true, message: '请填写客户名称', trigger: 'change' }],
  salesDocumentNum: [{ required: true, message: '请填写销售发货单号', trigger: 'change' }],
  complaints: [{ required: true, message: '请填写投诉问题', trigger: 'bulr' }],
  solution: [{ required: true, message: '请填写投诉问题', trigger: 'bulr' }],
  solutionRemark: [{ required: true, message: '请填写投诉问题', trigger: 'bulr' }],
  solutionUrl: [{ required: true, message: '请上传解决方案附件', trigger: 'change' }],
  reviewComments: [{ required: true, message: '请填写审核意见', trigger: 'bulr' }]
})

// 客户选择
const preservation = val => {
  ruleForm.customerName = val.customerName
  ruleForm.customerId = val.id
  ruleForm.orderType = val.type
  customerClose()
}
// 销售单号选择
const saleOrderSub = async obj => {
  // console.log(obj)
  ruleForm.salesDocumentNum = obj.wodDocNum
  ruleForm.orderType = obj.type
  ruleForm.materialCode = obj.materialCode
  try {
    proxy.$modal.loading('请稍候...')
    const { data: res } = await GetDataBySaleNumberAndMaterialCodeAPI({
      saleNumber: obj.connectionId,
      materialCode: obj.materialCode
    })
    ruleForm.complaintsList = [res]
    ruleForm.materialCode = res.materialCode
    ruleForm.materialId = res.materialId

    // console.log(res)
    orderShow.value = false
  } catch {
  } finally {
    proxy.$modal.closeLoading()
  }
}
// 提交
const submit = () => {
  return new Promise((resolve, reject) => {
    ruleFormRef.value.validate((valid, fields) => {
      if (!valid) {
        resolve(false)
        proxy.Mes('warning', '请填写完整')
        return
      }
      // console.log(ruleForm)
      resolve(ruleForm)
    })
  })
}

// console.log(props.disabled)
// 新增关闭
const customerClose = () => {
  customerShow.value = false
}

defineExpose({ submit })
</script>

<template>
  <div class="app-container">
    <el-form
      ref="ruleFormRef"
      class="demo-ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      label-position="right"
      status-icon
    >
      <div class="flex-between">
        <el-form-item label="客户名称" prop="customerId">
          <el-input
            :prefix-icon="Search"
            clearable
            :disabled="!props.disabled"
            v-model="ruleForm.customerName"
            placeholder="客户名称"
            @click="customerShow = true"
          />
        </el-form-item>
        <el-form-item label="销售发货单号" prop="salesDocumentNum">
          <el-input
            :prefix-icon="Search"
            clearable
            :disabled="!props.disabled"
            v-model="ruleForm.salesDocumentNum"
            placeholder="销售发货单号"
            @click="orderShow = true"
          />
        </el-form-item>
      </div>
      <el-form-item label="投诉问题" prop="complaints">
        <el-input
          autosize
          clearable
          :disabled="!props.disabled"
          v-model="ruleForm.complaints"
          :rows="4"
          type="textarea"
          placeholder="请输入投诉问题"
          :input-style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item label="解决方案" prop="solution" v-if="!props.disabled">
        <el-select v-model="ruleForm.solution" clearable placeholder="'请选择'">
          <el-option v-for="(item, index) in solution_type" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="方案备注" prop="solutionRemark" v-if="!props.disabled">
        <el-input
          autosize
          clearable
          v-model="ruleForm.solutionRemark"
          :rows="4"
          type="textarea"
          placeholder="请输入方案备注"
          :input-style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item label="投诉附件" prop="enclosureUrl" v-if="props.disabled">
        <ImageUpload v-model="ruleForm.enclosureUrl" v-if="props.disabled" />
        <ImagePreview :src="ruleForm.enclosureUrl" v-else />
      </el-form-item>
      <el-form-item label="解决方案附件" prop="solutionUrl" v-if="!props.disabled">
        <ImageUpload v-model="ruleForm.solutionUrl" v-if="!props.disabled" />
        <ImagePreview :src="ruleForm.solutionUrl" v-else />
      </el-form-item>
    </el-form>
    <el-table stripe border :data="ruleForm.complaintsList" style="margin-top: 10px">
      <el-table-column type="selection" width="55" align="center" fixed="left" />
      <el-table-column label="序号" width="70" type="index" />
      <el-table-column label="物料编码" prop="materialCode" width="120" />
      <el-table-column label="物料名称" prop="materialName" width="120" />
      <el-table-column label="物料规格" prop="materialSpec" width="120" />
      <el-table-column label="铺网类型" prop="materialNetTypeDict" width="120" />
      <el-table-column label="网型" prop="materialNetDict" width="120" />
      <el-table-column label="配比" prop="materialRatio" width="120" />
      <el-table-column label="克重(g/m^2)" prop="materialGheavy" width="120" />
      <el-table-column label="幅宽(mm)" prop="widthCloth" width="120" />
      <el-table-column label="卷径(cm)" prop="rollDiameter" width="120" />
      <el-table-column label="质量标准" prop="qualityStandardDict" width="120" />
    </el-table>
    <!-- 客户弹窗 -->
    <Customer :is-show="customerShow" @preservation="preservation" @cancel="customerShow = false" />
    <!-- <p-XiaoheDialog :dialogVisible="customerShow" title="客户选择" @close="customerClose" width="50%">
      <template #body>
      </template>
    </p-XiaoheDialog> -->

    <!-- 销售发货号 仓储完成时开整-->
    <SaleOrder :is-show="orderShow" @preservation="saleOrderSub" @cancel="orderShow = false" />
  </div>
</template>

<style lang="scss" scoped></style>
